<!-- 轮播图 -->
<template>
  <div class="box">
    <div class="set-view">
      <div class="top">
        <div class="top-btn" @click="onadd">添加图层 ...</div>
        <!-- <div class="top-info"><img src="../assets/msg.png" alt=""></div>
				<div class="top-info"><img src="../assets/share.png" alt=""></div> -->
        <div class="top-info"><img src="../assets/wonder.png" alt="" /></div>
      </div>
      <div class="list" v-for="(item, index) in list" :key="index">
        <div class="list-left" @click="onVisible(item)">
          <a-icon
            type="eye"
            :style="{ color: item.eyeshow ? '#0278ff' : '#333' }"
          />
        </div>
        <div class="list-right">
          <div class="delete" @click="ondel(index)">
            <a-icon type="close" style="cursor: pointer" />
          </div>
          <div class="title">
            {{ item.title }}<span>{{ item.titleex }}</span>
          </div>
          <div class="time">28/05/2022</div>
          <div class="contet">
            <div
              class="contet-color"
              :style="{
                background:
                  'linear-gradient(90deg,' + item.options[item.setindex] + ')',
              }"
            ></div>
            <div class="contet-line">
              <img src="../assets/line1.png" alt="" v-if="index == 0" />
              <img src="../assets/line1.png" alt="" v-else />
            </div>
          </div>
          <div class="info">
            <div>
              <a-icon type="vertical-align-bottom" style="color: #333333" />
            </div>
            <div><a-icon type="info" style="color: #333333" /></div>
            <div><img src="../assets/img1.png" /></div>
            <div style="width: 73px"><img src="../assets/water.png" /></div>
            <div><span>日志</span></div>
            <div @click="item.setstate = !item.setstate">
              <a-icon type="setting" style="color: #333333" />
            </div>
          </div>
          <div class="palette" v-show="item.setstate">
            <div class="palette-text">配色表</div>
            <div class="palette-cont">
              <div
                class="palette-box"
                v-for="(itm, ink) in item.options"
                :key="ink"
                :id="item.setindex == ink ? 'active' : ''"
                @click="item.setindex = ink"
              >
                <div
                  :style="{ background: 'linear-gradient(90deg,' + itm + ')' }"
                ></div>
              </div>
            </div>
            <div class="palette-text">其他选项</div>
            <div class="input-div">
              <div>最小值： <a-input placeholder="请输入" size="small" /></div>
              <div>最大值：<a-input placeholder="请输入" size="small" /></div>
            </div>
            <div class="checkbox-view">
              <a-checkbox @change="onChange"> 忽略超出范围的值 </a-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "setDiv",
  data() {
    return {
      list: [
        {
          title: "大气风",
          titleex: "",
          text: "大气风",
          time: "",
          setstate: false,
          options: [
            "#0f0788, #8506a7,#c7427d,#ed7953,#fdae32,#f0f723",
            "#482071,#33618d,#4ec36a,#f0e51d",
            "#482071,#33618d,#4ec36a,#fdebad",
            "#002f6f,#7d7c78,#f4dc4d",
            "#0055d1,#47a613,#fbc923,#ff4700",
          ],
          show: true,
          setindex: 0,
          eyeshow: true,
		  showAction:''
        },
        {
          title: "海水环流",
          titleex: "(亚太)",
          text: "海水环流(亚太)",
          time: "",
          setstate: false,
          options: [
            "#0f0788, #8506a7,#c7427d,#ed7953,#fdae32,#f0f723",
            "#482071,#33618d,#4ec36a,#f0e51d",
            "#482071,#33618d,#4ec36a,#fdebad",
            "#002f6f,#7d7c78,#f4dc4d",
            "#0055d1,#47a613,#fbc923,#ff4700",
          ],
          show: true,
          setindex: 0,
          eyeshow: true,
		  showAction:''
        },
        {
          title: "海水环流",
          titleex: "(全球)",
          text: "海水环流(全球)",
          time: "",
          setstate: false,
          options: [
            "#0f0788, #8506a7,#c7427d,#ed7953,#fdae32,#f0f723",
            "#482071,#33618d,#4ec36a,#f0e51d",
            "#482071,#33618d,#4ec36a,#fdebad",
            "#002f6f,#7d7c78,#f4dc4d",
            "#0055d1,#47a613,#fbc923,#ff4700",
          ],
          show: true,
          setindex: 0,
          eyeshow: true,
		  showAction:''
        },
      ],
    };
  },
  methods: {
    onChange(e) {
      console.log(`checked = ${e.target.checked}`);
    },
    onadd() {
      this.$emit("add");
      console.log(12346);
    },
    ondel(index) {
      this.list.splice(index, 1);
    },
    onVisible(item) {
      item.eyeshow = !item.eyeshow;
	  eval(item.showAction)
    },
  },
  mounted() {},
  destroyed() {},
};
</script>

<style scoped lang="less">
.set-view {
  width: 380px;
  border-radius: 10px;
  background-color: rgb(226, 226, 226);
  padding: 12px;
  box-sizing: border-box;
  .top {
    width: 100%;
    height: 35px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    .top-btn {
      width: 225px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border-radius: 8px;
      font-size: 16px;
      color: #fff;
      background-color: rgb(2, 120, 255);
      cursor: pointer;
      // background: linear-gradient(270deg, #FF4544, #FB7541);
    }
    .top-info {
      width: 32px;
      height: 32px;
      background-color: rgb(227, 227, 227);
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 2px 9px 1px rgba(106, 98, 93, 0.2);
      cursor: pointer;
      img {
        width: 20px;
        height: 18px;
      }
    }
  }
}
.list {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0 20px 0 6px;
  box-sizing: border-box;
  margin-top: 22px;
  .list-left {
    i {
      cursor: pointer;
    }
  }
  .list-right {
    width: 94%;
    position: relative;
    .delete {
      position: absolute;
      right: 0;
      top: 0;
      padding-top: 5px;
      i {
        display: none;
        font-weight: bold;
      }
    }
    .title {
      line-height: 22px;
      font-size: 13px;
      span {
        color: #b2b2b2;
      }
    }
    .time {
      font-size: 13px;
      color: #b2b2b2;
      line-height: 13px;
    }
    .contet {
      width: 100%;
      margin-top: 10px;
      .contet-color {
        width: 305px;
        height: 8px;
        border-radius: 4px;
        background: linear-gradient(
          -270deg,
          #0f0788,
          #8506a7,
          #c7427d,
          #ed7953,
          #fdae32,
          #f0f723
        );
      }
      .contet-line {
        width: 312px;
        height: 18px;
        display: flex;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .info {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      height: 26px;
      margin-top: 12px;
      div {
        height: 26px;
        min-width: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 9px;
        box-shadow: 0px 2px 9px 1px rgba(106, 98, 93, 0.2);
        background: linear-gradient(120deg, #e3e3e3, #dddddd);
        border-radius: 5px;
        cursor: pointer;
        img {
          width: 20px;
          height: 18px;
        }
        span {
          color: #0f7efd;
        }
      }
    }
  }
}
.list-right:hover > .delete > i {
  display: block;
}
.palette {
  width: 298px;
  height: 206px;
  border-radius: 5px;
  border: 1px solid #cccccc;
  margin-top: 10px;
  padding: 14px 0 14px 12px;
  box-sizing: border-box;
  background-color: #f0f0f0;
  .palette-text {
    line-height: 15px;
    font-size: 14px;
  }
  .palette-cont {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin-top: 5px;
    margin-bottom: 8px;
    .palette-box {
      width: 70px;
      height: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 4px 3px;
      box-sizing: border-box;
      div {
        width: 100%;
        height: 100%;
        cursor: pointer;
        // background: linear-gradient(120deg,#482071,#33618d,#4ec36a,#f0e51d);
      }
    }
  }
  .input-div {
    width: 100%;
    margin-top: 5px;
    display: flex;
    align-items: center;
    div {
      margin-right: 5px;
      input {
        width: 77px;
      }
    }
  }
  .checkbox-view {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 5px;
  }
}
#active {
  border: 1px solid #0278ff;
}
</style>